<template>
	<view class="home">
		<view class="home_header" :style="'background-image: url('+logo+'); background-size: 100% 100%;'">
			<view class="home_tag_box" v-if="hide_data == '0'">
				<view class="home_tag_boxItem">
					访问量:{{qb_data}}
				</view>
				<view class="home_tag_boxItem">
					互动量:{{hf_data}}
				</view>
				<view class="home_tag_boxItem">
					解答率:{{jjl}}
				</view>
			</view>
			<view class="home_tab_box">
				<view class="home_tab_boxItem" v-for="(item,index) in tabList" :key="index"
					 @click="chooseTab(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="home_first">
			<view class="home_first_box">
				<view class="home_first_box_top">
					<view class="home_first_box_top_left">
						<view class="home_first_box_top_left_img">
							<image src="../../static/img/bbhome1.png" mode=""></image>
						</view>
						<view class="home_first_box_top_left_title">
							活动公告
						</view>
					</view>
					<view class="home_first_box_top_right" @click="goAc">
						更多
					</view>
				</view>
				<view class="home_first_box_main">
					<swiper class="xswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
						<swiper-item v-for="(item,index) in xqInfo" :key="index">
							<view class=""  @click="goBindDetail(item)">
								<view class="firstImg">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="firstText">
									{{item.title}}
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="home_second">
			<view class="home_second_box">
				<view class="home_second_box_top">
					<view class="home_second_box_top_left">
						<view class="home_second_box_top_left_img">
							<image src="../../static/img/bbhome2.png" mode=""></image>
						</view>
						<view class="home_second_box_top_left_title">
							拍客美图
						</view>
					</view>
					<view class="home_second_box_top_right" @click="goOldHome(2)">
						更多
					</view>
				</view>
				<view class="home_second_box_main">
					<swiper class="pswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
						<swiper-item v-for="(item,index) in pkList" :key="index">
							<view class="" @click="goWorkDetail(item)">
								<view class="pkImg">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="pkInfo" @click.stop="goWorker(item)">
									<view class="pkInfo_left">
										<image :src="item.user.avatar" mode=""></image>
									</view>
									<view class="pkInfo_right">
										{{item.user.nickname}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="home_third">
			<view class="home_third_box">
				<view class="home_third_box_top">
					<view class="home_third_box_top_left">
						<view class="home_third_box_top_left_img">
							<image src="../../static/img/bbhome3.png" mode=""></image>
						</view>
						<view class="home_third_box_top_left_title">
							红娘相亲
						</view>
					</view>
					<view class="home_third_box_top_right" @click="goOldHome(0)">
						更多
					</view>
				</view>
				<view class="home_third_box_main">
					<view class="home_third_box_main_item">
						<view class="home_third_box_main_item_top">
							<view class="home_third_box_main_item_top_left" style="background-color: #1CA793;"></view>
							<view class="home_third_box_main_item_top_right" style="color: #1CA793;">
								袜叔相亲
							</view>
						</view>
						<swiper class="hnswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item v-for="(item,index) in wsList" :key="index">
								<view class="" @click="goPerson(item)">
									<view class="hnImg">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="hnName">
										<view class="hnName_left" :style="item.sex == 1?'color:#045B9B;':'color:#EC6468;'">
											好{{item.sex_text}}
										</view>
										<view class="hnName_right">
											{{item.age}}岁
										</view>
									</view>
									<view class="hnInfo">
										<view class="hnInfo_item">
											<view class="hnInfo_item_left">
												<image v-if="item.sex == 2" src="../../static/img/xl.png" mode=""></image>
												<image v-else-if="item.sex == 1" src="../../static/img/xll.png" mode=""></image>
											</view>
											<view class="hnInfo_item_right">
												{{item.xueli}}
											</view>
										</view>
										<view class="hnInfo_item" style="margin-top: 12rpx;">
											<view class="hnInfo_item_left" style="width: 28rpx;">
												<image v-if="item.sex == 2" src="../../static/img/hy.png" mode=""></image>
												<image v-else-if="item.sex == 1" src="../../static/img/hyl.png" mode=""></image>
											</view>
											<view class="hnInfo_item_right">
												{{item.hangye}}
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="home_third_box_main_item">
						<view class="home_third_box_main_item_top">
							<view class="home_third_box_main_item_top_left" style="background-color: #045B9B;"></view>
							<view class="home_third_box_main_item_top_right" style="color: #045B9B;">
								快报好男好女
							</view>
						</view>
						<swiper class="hnswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item v-for="(item,index) in kbList" :key="index">
								<view class="" @click="goHn(item)">
									<view class="hnImg">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="hnName">
										<view class="hnName_left" :style="item.sex == 1?'color:#045B9B;':'color:#EC6468;'">
											好{{item.sex_text}}
										</view>
										<view class="hnName_right">
											{{item.age}}岁
										</view>
									</view>
									<view class="hnInfo">
										<view class="hnInfo_item">
											<view class="hnInfo_item_left">
												<image v-if="item.sex == 2" src="../../static/img/xl.png" mode=""></image>
												<image v-else-if="item.sex == 1" src="../../static/img/xll.png" mode=""></image>
											</view>
											<view class="hnInfo_item_right">
												{{item.xueli}}
											</view>
										</view>
										<view class="hnInfo_item" style="margin-top: 12rpx;">
											<view class="hnInfo_item_left" style="width: 28rpx;">
												<image v-if="item.sex == 2" src="../../static/img/hy.png" mode=""></image>
												<image v-else-if="item.sex == 1" src="../../static/img/hyl.png" mode=""></image>
											</view>
											<view class="hnInfo_item_right">
												{{item.hangye}}
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="home_fourth">
			<view class="home_fourth_box">
				<view class="home_fourth_box_top">
					<view class="home_fourth_box_top_left">
						<view class="home_fourth_box_top_left_img">
							<image src="../../static/img/bbhome4.png" mode=""></image>
						</view>
						<view class="home_fourth_box_top_left_title">
							律师帮忙
						</view>
					</view>
					<view class="home_fourth_box_top_right" @click="goOldHome(1)">
						更多
					</view>
				</view>
				<view class="home_fourth_box_main">
					<swiper class="lswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" vertical>
						<swiper-item v-for="(item,index) in lsList" :key="index">
							<view class="lswiper_item">
								<view class="lswiper_item_item" v-for="(newItem,newIndex) in item" :key="newIndex" @click="goLay(newItem)">
									<view class="lswiper_item_item_title">
										{{newItem.session.title}}
									</view>
									<view class="lswiper_item_item_bottom">
										<view class="lswiper_item_item_bottom_left">
											<image :src="newItem.sender.avatar" mode=""></image>
										</view>
										<view class="lswiper_item_item_bottom_right">
											<view class="lswiper_item_item_bottom_right_top">
												<span>律师</span>
												<span style="color: #045B9B;margin: 0 10rpx;">{{newItem.sender.nickname}}</span>
												<span>已回复</span>
											</view>
											<!-- <view class="lswiper_item_item_bottom_right_bottom">
												{{newItem.content}}
											</view> -->
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getConfig,
		getXqList,
		getWsList,
		getKbList,
		// getLawyerList,
		// getMember,
		getPkAllList,
		getlawyerNotice
		// getPkAdd,
		// getGood
	} from '@/api/index.js'
	export default {
		data() {
			return {
				logo: '',
				can_upload: '1',
				hide_data: '0',
				hf_data: '',
				qb_data: '',
				jjl: '',
				open_xq: 1,
				tabList: [{
						name: '红娘相亲'
					},
					{
						name: '律师帮忙'
					},
					{
						name: '拍客美图'
					},
					{
						name: '我的交流'
					}
				],
				xqInfo:[],
				pkList: [],
				wsList: [],
				kbList:[],
				lsList:[]
			}
		},
		methods: {
			goAc(){
				uni.navigateTo({
					url:'/pages/views/blindList'
				})
			},
			goWorker(item) {
				uni.navigateTo({
					url: `/pages/views/workerDetail?id=${item.user_id}`
				})
			},
			goOldHome(num){
				uni.navigateTo({
					url:`/pages/views/home?activeTabIndex=${num}`
				})
			},
			goLay(item) {
				uni.navigateTo({
					url: `/pages/views/layDetail?id=${item.sender_id}&name=${item.sender.nickname}`
				})
			},
			goHn(item) {
				uni.navigateTo({
					url: `/pages/views/blindHn?id=${item.id}&name=${item.name}`,
				})
			},
			goPerson(item) {
				uni.navigateTo({
					url: `/pages/views/blindPerson?id=${item.id}&name=${item.name}`,
				})
			},
			goWorkDetail(item) {
				uni.navigateTo({
					url: `/pages/views/worksDetail?id=${item.id}`
				})
			},
			splitArray(arr) {
				let newArrays = [];
				for (let i = 0; i < arr.length; i += 2) {
					let newArray = arr.slice(i, i + 2);
					newArrays.push(newArray);
				}
				return newArrays;
			},
			async getNotice(){
				const res = await getlawyerNotice()
				this.lsList = this.splitArray(res.data)
				console.log(this.lsList);
			},
			async getKb() {
				const res = await getKbList()
				this.kbList = res.data
			},
			async getWs() {
				const res = await getWsList()
				this.wsList = res.data
			},
			async getPkList() {
				let data = {
					page: 1,
					limit: 3
				}
				const res = await getPkAllList(data)
				this.pkList = res.data.data
			},
			async config() {
				const res = await getConfig()
				this.logo = res.data.logo;
				this.can_upload = res.data.can_upload;
				this.hide_data = res.data.hide_data;
				this.jjl = res.data.jjl;
				this.qb_data = res.data.qb_data;
				this.hf_data = res.data.hf_data;
				this.open_xq = res.data.open_xq;
			},
			chooseTab(i){
				uni.navigateTo({
					url:`/pages/views/home?activeTabIndex=${i}`
				})
			},
			async getXq() {
				const res = await getXqList({
					type:2,
					page: 1,
					limit: 3
				})
				if (res.data.data.length > 0) {
					this.xqInfo = res.data.data
				}
			},
			goBindDetail(val) {
				uni.navigateTo({
					url: `/pages/views/blindDetail?id=${val.id}`
				})
			},
		},
		onShow() {
			
		},
		onLoad() {
			this.config()
			this.getXq()
			this.getPkList()
			this.getWs()
			this.getKb()
			this.getNotice()
		}
	}
</script>

<style scoped lang="scss">
.home{
	min-height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	.home_fourth{
		padding: 0 60rpx;
		.home_fourth_box{
			padding: 38rpx 0;
			.home_fourth_box_main{
				margin-top: 28rpx;
				.lswiper{
					height: 300rpx;
					.lswiper_item{
						.lswiper_item_item{
							margin-bottom: 30rpx;
							.lswiper_item_item_title{
								font-weight: 600;
								font-size: 26rpx;
								color: #333333;
								line-height: 30rpx;
								max-width: 600rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								white-space: normal;
								// overflow: hidden;
								// text-overflow: ellipsis;
								// white-space: nowrap;
							}
							.lswiper_item_item_bottom{
								display: flex;
								align-items: center;
								margin-top: 26rpx;
								.lswiper_item_item_bottom_left{
									width: 48rpx;
									height: 48rpx;
									margin-right: 18rpx;
									image{
										width: 100%;
										height: 100%;
									}
								}
								.lswiper_item_item_bottom_right{
									.lswiper_item_item_bottom_right_top{
										font-weight: 400;
										font-size: 22rpx;
										color: #999999;
										line-height: 20rpx;
									}
									.lswiper_item_item_bottom_right_bottom{
										margin-top: 30rpx;
										color: #333;
										font-size: 22rpx;
										line-height: 22rpx;
										font-weight: 400;
										max-width: 500rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}
					}
				}
			}
			.home_fourth_box_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.home_fourth_box_top_right{
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					line-height: 20rpx;
				}
				.home_fourth_box_top_left{
					display: flex;
					align-items: center;
					.home_fourth_box_top_left_img{
						width: 59rpx;
						height: 29rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.home_fourth_box_top_left_title{
						font-weight: 400;
						font-size: 30rpx;
						color: #045B9B;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.home_third{
		padding: 0 60rpx;
		.home_third_box{
			padding: 38rpx 0;
			border-bottom: 1rpx solid #ddd;
			.home_third_box_main{
				margin-top: 30rpx;
				background: linear-gradient(to bottom,#F7EBB0,#fff);
				border-radius: 18rpx;
				display: flex;
				.home_third_box_main_item{
					width: 50%;
					padding: 24rpx 32rpx;
					.home_third_box_main_item_top{
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;
						.home_third_box_main_item_top_left{
							width: 10rpx;
							height: 28rpx;
							margin-right: 18rpx;
						}
						.home_third_box_main_item_top_right{
							font-weight: 400;
							font-size: 30rpx;
							line-height: 28rpx;
						}
					}
					.hnswiper{
						height: 380rpx;
						.hnInfo{
							margin-top: 14rpx;
							.hnInfo_item{
								display: flex;
								align-items: center;
								.hnInfo_item_right{
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									line-height: 22rpx;
								}
								.hnInfo_item_left{
									width: 30rpx;
									height: 26rpx;
									margin-right: 16rpx;
									image{
										width: 100%;
										height: 100%;
									}
								}
							}
						}
						.hnName{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 18rpx;
							.hnName_left{
								font-weight: 400;
								font-size: 28rpx;
								color: #045B9B;
								line-height: 26rpx;
							}
							.hnName_right{
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								line-height: 22rpx;
							}
						}
						.hnImg{
							width: 242rpx;
							height: 242rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 18rpx;
							}
						}
					}
				}
			}
			.home_third_box_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.home_third_box_top_right{
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					line-height: 20rpx;
				}
				.home_third_box_top_left{
					display: flex;
					align-items: center;
					.home_third_box_top_left_img{
						width: 59rpx;
						height: 29rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.home_third_box_top_left_title{
						font-weight: 400;
						font-size: 30rpx;
						color: #045B9B;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.home_second{
		padding: 0 60rpx;
		.home_second_box{
			padding: 38rpx 0;
			border-bottom: 1rpx solid #ddd;
			.home_second_box_main{
				margin-top: 30rpx;
				.pswiper{
					height: 428rpx;
					.pkInfo{
						margin-top: 26rpx;
						display: flex;
						align-items: center;
						.pkInfo_left{
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.pkInfo_right{
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 26rpx;
						}
					}
					.pkImg{
						width: 100%;
						height: 324rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.home_second_box_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.home_second_box_top_left{
					display: flex;
					align-items: center;
					.home_second_box_top_left_img{
						width: 59rpx;
						height: 29rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.home_second_box_top_left_title{
						font-weight: 400;
						font-size: 30rpx;
						color: #045B9B;
						line-height: 28rpx;
					}
				}
				.home_second_box_top_right{
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					line-height: 20rpx;
				}
			}
		}
	}
	.home_first{
		padding: 0 60rpx;
		.home_first_box{
			padding: 38rpx 0;
			border-bottom: 1rpx solid #ddd;
		}
		.home_first_box_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.home_first_box_top_left{
				display: flex;
				align-items: center;
				.home_first_box_top_left_img{
					width: 59rpx;
					height: 29rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.home_first_box_top_left_title{
					font-weight: 400;
					font-size: 30rpx;
					color: #045B9B;
					line-height: 28rpx;
				}
			}
			.home_first_box_top_right{
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				line-height: 20rpx;
			}
		}
		.home_first_box_main{
			margin-top: 30rpx;
			.xswiper{
				height: 420rpx;
				.firstImg {
					width: 630rpx;
					height: 354rpx;
					margin: 0 auto;
					margin-top: 20rpx;
				
					image {
						width: 100%;
						height: 100%;
						// border-radius: 20rpx;
					}
				}
				
				.firstText {
					width: 630rpx;
					margin: 0 auto;
					margin-top: 10rpx;
					color: #333;
					font-size: 28rpx;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #E2E2E2;
				}
			}
		}
	}
	.home_header {
		width: 750rpx;
		height: 438rpx;
		// background-color: red;
		position: relative;
		display: flex;
		align-items: flex-end;
	
		.home_tag_box {
			width: 750rpx;
			position: absolute;
			bottom: 77rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
	
			.home_tag_boxItem {
				padding: 6rpx 17rpx;
				background: linear-gradient(to bottom, #9f8f5f, #f7ebaf);
				font-size: 28rpx;
				color: #045B9B;
				border-radius: 24rpx;
			}
		}
	
		.home_tab_box {
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
	
			.home_tab_boxItem {
				width: 151rpx;
				height: 48rpx;
				background: linear-gradient(to bottom, #1CA893, #085D92);
				border-radius: 36rpx 36rpx 0rpx 0rpx;
				font-size: 28rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.active {
				background: #fff;
				color: #045B9B;
			}
		}
	}
}
</style>
